<template>
  <div>
    <ul>
      <vue-seamless-scroll :data="posdata" class="warpgg" :class-option="defaultOption">
        <!-- 循环渲染每条数据 -->
        <li v-for="(item, index) in posdata" :key="index">
          <div class="h">
            <span>车辆名称：</span>
            <span class="stuas">{{ item.name }}</span>
          </div>
          <div class="h">
            <span>家庭地址：</span>
            <span class="huangs">{{ item.homeAddress }}</span>
          </div>

          <div class="h">
            <span>单位地址：</span>
            <span class="huangs">{{ item.unitAddress }}</span>
          </div>

          <div class="h">
            <span>是否驶入禁行路段：</span>
            <span>{{ item.isJingXing }}</span>
          </div>

          <div class="h">
            <span>是否危险驾驶：</span>
            <span>{{ item.isWeiXian }}</span>
          </div>

          <div class="h">
            <span>是否发生碰撞：</span>
            <span>{{ item.pengzhuang }}</span>
          </div>

          <div class="h">
            <span>监测时间：</span>
            <span>{{ item.createDate }}</span>
          </div>
        </li>
      </vue-seamless-scroll>
    </ul>
  </div>
</template>

<script>
import vueSeamlessScroll from "vue-seamless-scroll";
export default {
  components: {
    vueSeamlessScroll
  },
  data() {
    return {
      posdata: [
        {
          name: "车辆A01",
          homeAddress: "北京市朝阳区建国路88号",
          unitAddress: "北京市海淀区中关村大街1号",
          isJingXing: "否",
          isWeiXian: "否",
          pengzhuang: "否",
          createDate: "2025-06-18 14:32:17"
        },
        {
          name: "车辆B02",
          homeAddress: "上海市浦东新区世纪大道100号",
          unitAddress: "上海市徐汇区漕溪路255号",
          isJingXing: "是",
          isWeiXian: "否",
          pengzhuang: "否",
          createDate: "2025-06-19 09:15:43"
        },
        {
          name: "车辆C03",
          homeAddress: "广州市天河区珠江新城华夏路28号",
          unitAddress: "广州市越秀区中山五路66号",
          isJingXing: "否",
          isWeiXian: "是",
          pengzhuang: "否",
          createDate: "2025-06-19 11:05:22"
        },
        {
          name: "车辆D04",
          homeAddress: "深圳市南山区高新科技园中区",
          unitAddress: "深圳市福田区深南大道8000号",
          isJingXing: "否",
          isWeiXian: "否",
          pengzhuang: "是",
          createDate: "2025-06-19 15:30:11"
        },
        {
          name: "车辆E05",
          homeAddress: "杭州市西湖区文三路159号",
          unitAddress: "杭州市余杭区五常大道1号",
          isJingXing: "否",
          isWeiXian: "否",
          pengzhuang: "否",
          createDate: "2025-06-20 08:45:09"
        },
        {
          name: "车辆F06",
          homeAddress: "成都市武侯区人民南路四段",
          unitAddress: "成都市高新区天府大道北段",
          isJingXing: "是",
          isWeiXian: "是",
          pengzhuang: "否",
          createDate: "2025-06-20 10:22:33"
        },
        {
          name: "车辆G07",
          homeAddress: "武汉市洪山区珞瑜路",
          unitAddress: "武汉市江汉区解放大道688号",
          isJingXing: "否",
          isWeiXian: "否",
          pengzhuang: "否",
          createDate: "2025-06-20 13:10:45"
        },
        {
          name: "车辆H08",
          homeAddress: "西安市雁塔区科技路",
          unitAddress: "西安市碑林区东大街1号",
          isJingXing: "否",
          isWeiXian: "是",
          pengzhuang: "否",
          createDate: "2025-06-20 16:48:27"
        },
        {
          name: "车辆I09",
          homeAddress: "南京市鼓楼区中山路",
          unitAddress: "南京市江宁区秣陵街道",
          isJingXing: "是",
          isWeiXian: "否",
          pengzhuang: "否",
          createDate: "2025-06-21 09:05:12"
        },
        {
          name: "车辆J10",
          homeAddress: "郑州市金水区农业路",
          unitAddress: "郑州市中原区中原西路",
          isJingXing: "否",
          isWeiXian: "否",
          pengzhuang: "是",
          createDate: "2025-06-21 10:12:34"
        },
        {
          name: "车辆K11",
          homeAddress: "长沙市天心区芙蓉南路",
          unitAddress: "长沙市岳麓区梅溪湖路",
          isJingXing: "否",
          isWeiXian: "否",
          pengzhuang: "否",
          createDate: "2025-06-18 15:22:44"
        },
        {
          name: "车辆L12",
          homeAddress: "重庆市渝中区解放碑",
          unitAddress: "重庆市江北区观音桥",
          isJingXing: "是",
          isWeiXian: "是",
          pengzhuang: "否",
          createDate: "2025-06-18 17:33:21"
        },
        {
          name: "车辆M13",
          homeAddress: "沈阳市沈河区青年大街",
          unitAddress: "沈阳市铁西区建设东路",
          isJingXing: "否",
          isWeiXian: "否",
          pengzhuang: "否",
          createDate: "2025-06-19 14:11:55"
        },
        {
          name: "车辆N14",
          homeAddress: "大连市沙河口区西安路",
          unitAddress: "大连市甘井子区华东路",
          isJingXing: "否",
          isWeiXian: "是",
          pengzhuang: "否",
          createDate: "2025-06-19 16:22:30"
        },
        {
          name: "车辆O15",
          homeAddress: "厦门市思明区中山路",
          unitAddress: "厦门市湖里区火炬路",
          isJingXing: "是",
          isWeiXian: "否",
          pengzhuang: "否",
          createDate: "2025-06-20 11:33:44"
        },
        {
          name: "车辆P16",
          homeAddress: "青岛市市南区香港中路",
          unitAddress: "青岛市崂山区苗岭路",
          isJingXing: "否",
          isWeiXian: "否",
          pengzhuang: "是",
          createDate: "2025-06-20 14:55:01"
        },
        {
          name: "车辆Q17",
          homeAddress: "南宁市青秀区民族大道",
          unitAddress: "南宁市兴宁区朝阳路",
          isJingXing: "否",
          isWeiXian: "否",
          pengzhuang: "否",
          createDate: "2025-06-21 09:30:18"
        },
        {
          name: "车辆R18",
          homeAddress: "昆明市五华区东风西路",
          unitAddress: "昆明市官渡区关上中路",
          isJingXing: "是",
          isWeiXian: "是",
          pengzhuang: "否",
          createDate: "2025-06-21 11:44:55"
        },
        {
          name: "车辆S19",
          homeAddress: "兰州市城关区酒泉路",
          unitAddress: "兰州市七里河区西津西路",
          isJingXing: "否",
          isWeiXian: "否",
          pengzhuang: "否",
          createDate: "2025-06-21 13:22:10"
        },
        {
          name: "车辆T20",
          homeAddress: "乌鲁木齐市天山区人民路",
          unitAddress: "乌鲁木齐市沙依巴克区克拉玛依西路",
          isJingXing: "否",
          isWeiXian: "是",
          pengzhuang: "否",
          createDate: "2025-06-21 15:01:29"
        }
      ]
    };
  },
  computed: {
    defaultOption() {
      return {
        step: 0.2, // 数值越大速度滚动越快
        limitMoveNum: this.posdata.length, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      };
    }
  }
};
</script>

<style>
* {
  list-style-type: none;
}
ul {
  position: relative;
  width: 420px;
}
ul li {
  width: 100%;
  height: 210px;
  display: inline-block;
  /* background-color: chartreuse; */
  /* 设置下边框 */
  /* 清除所有边框 */
  border: none;
  /* 仅设置下边框 */
  border-bottom: 2px solid transparent; /* 注意这里的transparent */
  /* 指定边框图像源 */
  border-image-source: url("../../../assets/img/zuo_xuxian.png");
  /* 调整此值以适应您的图片，可能需要根据实际图片调整 */
  border-image-slice: 30;
  /* 设置边框图像宽度与下边框宽度一致 */
  /* border-image-width: 10px; */
  /* 确保边框图像仅应用于下边框 */
  border-image-repeat: stretch; /* 根据需要选择 stretch, round 或 repeat */
}

ul li:first-child {
  /* 仅设置下边框 */
  border-top: 2px solid transparent; /* 注意这里的transparent */
  /* 指定边框图像源 */
  border-image-source: url("../../../assets/img/zuo_xuxian.png");
  /* 调整此值以适应您的图片，可能需要根据实际图片调整 */
  border-image-slice: 30;
  /* 设置边框图像宽度与下边框宽度一致 */
  /* border-image-width: 10px; */
  /* 确保边框图像仅应用于下边框 */
  border-image-repeat: stretch; /* 根据需要选择 stretch, round 或 repeat */
}
.h {
  margin-top: 4px;
}
.h span:nth-child(1) {
  color: rgba(255, 255, 255, 0.6);
  font-size: 16px;
}
.h span:nth-child(2) {
  color: rgba(255, 255, 255, 0.8);
  font-size: 16px;
}
.stuas {
  color: #1890ff !important;
  font-size: 18px !important;
}

.warpgg {
  height: 520px;
  /* 设置滚动区域的高度 */
  overflow: hidden;
  /* 隐藏超出部分 */
  /* border: 1px solid #ccc; 可选：添加边框 */
}

.zhengchgahgt {
  color: #29fc29 !important;
}
.guzhang {
  color: #fc1a1a !important;
}
.huangs {
    color: #e6a23c !important;
}
</style>